<template>
  <div class="history">
    <div class="header">
      <p @click="ff">历史记录</p>
      <p @click="removeAll" style="color:red;">全部删除</p>
    </div>
    <div class="list">
      <u @click="fValue(v)" v-for="(v, i) in $store.state.objList" :key="i"
        >{{ v.name }} <b @click.stop="remove(v.id)">X</b></u
      >
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";

export default {
  setup(p, { emit }) {
    let store = useStore();

    function remove(id) {
      store.commit("remove", id);
    }

    function removeAll() {
      store.commit("removeAll");
    }
    function ff() {
      store.commit("ff");
    }

    function fValue(item) {
      emit("fValue", item.name);
      console.log(item.name);
    }

    return {
      remove,
      removeAll,
      ff,
      fValue,
    };
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: space-between;
  p {
    margin: 0 10px;
  }
}
.list {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  u {
    text-decoration: none;
    display: table;
    padding: 8px 25px;
    border-radius: 25px;
    border: 1px solid rgb(141, 137, 137);
    margin: 5px;
    b {
      margin: 5px;
      font-size: 18px;
      font-weight: 200;
    }
  }
}
</style>
